<template>
    <div class="goMore" @click="goToUrl">
        <div class="text">查看更多</div>
        <div class="arrow">
            <svg t="1734093211003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="4980" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                <path
                    d="M444.081633 689.632653c-5.22449 0-10.44898-2.089796-14.628572-6.269388-8.359184-8.359184-8.359184-21.420408 0-29.779592l156.734694-156.734693c8.359184-8.359184 21.420408-8.359184 29.779592 0 8.359184 8.359184 8.359184 21.420408 0 29.779591l-156.734694 156.734694c-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z"
                    fill="#000" p-id="4981"></path>
                <path
                    d="M600.816327 532.897959c-5.22449 0-10.44898-2.089796-14.628572-6.269388l-156.734694-156.734693c-8.359184-8.359184-8.359184-21.420408 0-29.779592 8.359184-8.359184 21.420408-8.359184 29.779592 0l156.734694 156.734694c8.359184 8.359184 8.359184 21.420408 0 29.779591-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z"
                    fill="#000" p-id="4982"></path>
                <path
                    d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z"
                    fill="#000" p-id="4983"></path>
            </svg>
        </div>

        <!-- <img src="@/assets/rightArrow.svg" class="arrow"> -->
    </div>

</template>

<script setup>
import { ref } from 'vue'
import router from '@/router';
const props = defineProps({
    toUrl: {
        type: String,
        default: '/'
    }
})

const goToUrl = () => {
    router.push(props.toUrl)
}
</script>

<style scoped lang="scss">
.goMore {
    margin-top: 50px;
    padding: 10px 30px;
    width: fit-content;
    background-color: white;
    border: 1px solid black;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;


    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-color: black;
        transition: all 0.3s ease-in-out;
        -webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    }

    &:hover::before {
        // 从左侧出现黑色内容填充
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 110%;
        height: 100%;
        background-color: black;
        -webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    }

    &:hover .text {
        color: white;
        z-index: 2;
    }

    .text {
        font-size: 18px;
        transition: all 0.3s ease-in-out;

    }

    &:hover .arrow {
        transition-delay: 0.2s;
        transform: translateX(10px);

        path {
            fill: rgb(255, 255, 255);
        }
    }

    .arrow {
        // 图片找得不好，底下有白边，为了视觉效果调整了一下
        padding-top: 2px;
        height: 28px;
        width: 28px;
        transition: all 0.3s ease-in-out;
    }

    &:hover {
        background-color: #eee;
    }


}
</style>
